<template>
	<div id="content">
		<div class="login_body">
			<div>
				<input class="login_text" type="text" placeHolder="账户名/手机号/Email" v-model="username">
			</div>
			<div>
				<input class="login_text" type="password" placeHolder="请输入您的密码" v-model="password">
			</div>
			<div class="login_btn">
				<input type="submit" value="登录" @click="handleToLogin">
			</div>
			<div class="login_link">
				<router-link to="/mine/register" >立即注册</router-link>
				<router-link to="/mine/findPassword">找回密码</router-link>
			</div>
		</div>
		<div style="display: flex;margin-top: 10px;width: 100px;justify-content: space-around;" >
			<button style="width: 20px;" @click="handleTap('REDUCE')">+</button>
			<input type="text" v-model="this.$store.state.count" size="1" style="border: 1px solid red;">
			<button style="width: 20px;" @click="handleTap('ADD')">-</button>
		</div>
	</div>
</template>

<script>
	
	import {messageBox} from '@/components/JS'
	export default {
		data() {
			return {
				username: "",
				password: ""
			}
		},
		methods: {
			handleTap(type){
				this.$store.commit('HandleTapCuptrue',{type})
			},
			//登录
			handleToLogin() {
				//发送ajax请求
				this.axios.post('/api2/users/login', {
					username: this.username,
					password: this.password
				}).then(res => {
					let status = res.data.status
					let _this = this;
					if (status === 0) {
						//success
						messageBox({//注意这里面的this指向的是MessageBox的
							title: '登录',
							content: '登录成功',
							ok: '确定',
							handleOk(){
								//这里面的this指向的是messageBox所以需要将当前的this保存一份
								_this.$router.push('/mine/profile')
							}
						})
					} else {
						messageBox({
							title: '登录',
							content: '登录失败',
							ok: '确定',
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	#content .login_body {
		width: 100%;
	}

	.login_body .login_text {
		width: 100%;
		height: 40px;
		border: none;
		border-bottom: 1px #ccc solid;
		margin-bottom: 5px;
		outline: none;
		text-indent: 10px;
	}

	.login_body .login_btn {
		height: 50px;
		margin: 10px;
	}

	.login_body .login_btn input {
		width: 100%;
		height: 100%;
		background: #e54847;
		border-radius: 3px;
		border: none;
		display: block;
		color: white;
		font-size: 20px;
	}

	.login_body .login_link {
		display: flex;
		justify-content: space-between;
	}

	.login_body .login_link a {
		text-decoration: none;
		margin: 0 5px;
		font-size: 12px;
		color: #e54847;
	}
</style>
